<script setup>
const props = defineProps({
  value: { type: Number, default: 0 },
  max: { type: Number, default: 99 },
});

const { value, max } = toRefs(props);
const isValueOverMax = computed(() => value.value > max.value);
</script>

<template>
  <div class="basic-badge" v-if="value">
    <div class="basic-badge__pot" :class="value > 9 ? 'not-single' : ''">{{ isValueOverMax ? `${max}+` : value }}</div>
  </div>
</template>

<style lang="scss" scoped>

.not-single {
  padding: 0 4px;
}

.basic-badge {
  display: flex;

  .basic-badge__pot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background: #ED715B;
    min-width: 14px;
    height: 14px;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
  }
}
</style>
